<template>
  <ul class="tabs">
    <li class="tabs-row">
      <div class="tabs-row-label">科目分类：</div>
      <div class="tabs-row-item">
        <a
          class="el-button el-button--primary el-button--small"
          :class="active1 ? 'is-plain' : ''"
          href="/curriculum"
          title="全部"
          style="margin-bottom: 12px"
          >全部</a
        >
        <a
          v-for="item in options"
          :key="item.id"
          class="el-button el-button--primary el-button--small"
          :class="item.id == active1 ? '' : 'is-plain'"
          :href="`/curriculum/${item.id}`"
          :title="item.name"
          style="margin-bottom: 12px"
          >{{ item.name }}</a
        >
      </div>
    </li>
    <!-- 二级 -->
    <li class="tabs-row" v-if="twoData.length > 0">
      <div class="tabs-row-label"></div>
      <div class="tabs-row-item">
        <a
          v-for="item in twoData"
          :key="item.id"
          class="el-button el-button--primary el-button--small"
          :class="item.id == active2 ? '' : 'is-plain'"
          :href="`/curriculum/${active1}/${item.id}`"
          :title="item.name"
          style="margin-bottom: 12px"
          >{{ item.name }}</a
        >
      </div>
    </li>
    <!-- 三级 -->
    <li class="tabs-row" v-if="threeData.length > 0">
      <div class="tabs-row-label"></div>
      <div class="tabs-row-item">
        <a
          v-for="item in threeData"
          :key="item.id"
          class="el-button el-button--primary el-button--small"
          :class="item.id == active3 ? '' : 'is-plain'"
          :href="`/curriculum/${active1}/${active2}/${item.id}`"
          :title="item.name"
          style="margin-bottom: 12px"
          >{{ item.name }}</a
        >
      </div>
    </li>
  </ul>
</template>

<script setup>
const props = defineProps({
  options: {
    type: Array,
    default: [],
  },
});
const all = useRoute().params.all;
const active1 = ref(null);
const active2 = ref(null);
const active3 = ref(null);
const twoData = ref([]);
const threeData = ref([]);
const seoTitle = ref("课程中心");
const seoKeywords = ref("课程中心");
const seoDescription = ref("课程中心");
watchEffect(() => {
  if (all) {
    // 给一级选中 展示二级菜单
    if (all[0]) {
      active1.value = all[0];
      props.options.forEach((item) => {
        if (item.id == all[0]) {
          twoData.value = item.children || [];
          // 修改TDK
          seoTitle.value += `_${item.name}`;
          seoKeywords.value += `,${item.name}`;
          seoDescription.value += `，${item.name}`;
        }
      });
    }
    // 给二级选中 展示三级菜单
    if (all[1]) {
      active2.value = all[1];
      if (twoData.value.length > 0) {
        twoData.value.forEach((item) => {
          if (item.id == all[1]) {
            threeData.value = item.children || [];
            // 修改TDK
            seoTitle.value += `_${item.name}`;
            seoKeywords.value += `,${item.name}`;
            seoDescription.value += `，${item.name}`;
          }
        });
      }
    }
    // 给三级选中 不展示后续菜单
    if (all[2]) {
      active3.value = all[2];
      if (threeData.value.length > 0) {
        threeData.value.forEach(item => {
          if (item.id == all[2]) {
            // 修改TDK
            seoTitle.value += `_${item.name}`;
            seoKeywords.value += `,${item.name}`;
            seoDescription.value += `，${item.name}`;
          }
        })
      }
    }
    // 修改TDK
    useSeoMeta({
      title: seoTitle,
      keywords: seoKeywords,
      description: seoDescription,
      ogTitle: seoTitle,
      ogDescription: seoDescription,
    });
  }
});
</script>

<style lang="less">
.tabs-row-item {
  .el-button {
    margin-right: 12px;

    + .el-button {
      margin-left: 0;
      margin-right: 12px;
    }
  }
}
</style>
<style lang="less" scoped>
.tabs {
  background: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.03);
  border-radius: 10px;

  &-row {
    display: flex;
    align-items: flex-start;
    border-bottom: 1px solid #f2f2f2;
    padding: 14px 19px 2px 19px;

    &-label {
      width: 90px;
      line-height: 24px;
      font-weight: bold;
      font-size: 14px;
    }

    &-item {
      flex: 1;
      overflow: hidden;
    }

    &:last-child {
      border-bottom: 0;
    }
  }
}
</style>
